<template>
    <div class="searchV">
        <div v-if="$route.query.keyword!=``">
            <span >{{$route.query.keyword }}</span>
            的搜索结果如下
        </div>
        <el-menu :default-active="activeIndex" class="el-menu-demo CollectBar" mode="horizontal" @select="handleSelect"
            text-color="#001" active-text-color="rgb(191, 178, 210)">
            <el-menu-item index="1">单曲</el-menu-item>
            <el-menu-item index="2">歌单</el-menu-item>
            <el-menu-item index="3">专辑</el-menu-item>
            <el-menu-item index="4">歌手</el-menu-item>
            <el-menu-item index="5">用户</el-menu-item>
        </el-menu>
        <component :url="url" :keyword="$route.query.keyword"  v-bind:is="currentTabComponent"></component>
    </div>
</template>

<script>
import { url } from '@/apiUrl'
import single from './child/single.vue'
import singer from './child/singer.vue'
import songList from './child/songList.vue'
import album from './child/album.vue'
import user from './child/user.vue'
export default {
    components: {
    single, singer, songList, album, user
    },
    data: function () {
        return {
            activeIndex: "1",
            currentTabComponent: "single",
            opList: ['single', 'songList', 'album', 'singer', 'user'],
            url:null
        }
    },
    watch:{
        keyword(newval,oldval){
            this.getSearch()
        } 
    },
    methods: {
        handleSelect(key, keyPath) {
        this.$store.commit("updateActive",key)
        this.$data.currentTabComponent = this.$data.opList[key-1]
        this.$store.commit("updatecurrent",this.$data.currentTabComponent)
        }
    },
    mounted(){
        this.url=url
        this.activeIndex=this.$store.state.defdefaultActive
        this.currentTabComponent=this.$store.state.currentTabComponent
    },
}
</script>

<style lang="scss" scoped>
.el-menu{
    user-select: none;
}
.searchV>div {
    margin: 0 1.5rem;

    span {
        font-size: 3rem;
    }
}
</style>